<template>
  <div id="app"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// const COLOR_LEVEL = [
//   'rgba(0,255,0,0.7)',
//   'rgba(255,255,255,0.7)',
//   'rgba(255,125,0,0.7)',
//   'rgba(255,0,0,0.7)',
//   'rgba(152,0,75,0.7)',
//   'rgba(178,24,43,0.7)',
// ];

import 'mapbox-gl-controls/lib/controls.css';
import MapboxLanguage from '@mapbox/mapbox-gl-language';

export default {
  data() {
    return {
      // 历史数据
      historyData: null,
      // map 地图对象实例
      map: null,
    };
  },
  beforeCreate() {
    // 兼容旧版本没有remove()的情况
    if (!('remove' in Element.prototype)) {
      Element.prototype.remove = function () {
        if (this.parentNode) {
          this.parentNode.removeChild(this);
        }
      };
    }
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw';

      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        // style: {
        //   version: 8,
        //   layers: [
        //     {
        //       id: 'mapsource',
        //       source: 'mapsource',
        //       type: 'raster',
        //     },
        //   ],
        //   // sprite: 'mapbox://sprites/mapbox/dark-v10',
        //   glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
        //   sources: {
        //     mapsource: {
        //       type: 'raster',
        //       // tiles: [`https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101Q52Bo8qQwh&access_token=${MAP_ACCESS_TOKEN}`],
        //       tiles: [
        //         `https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?access_token=${mapboxgl.accessToken}`,
        //         `https://b.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?access_token=${mapboxgl.accessToken}`,
        //       ],
        //       // tileSize: 256,
        //     },
        //   },
        // },
        style: 'mapbox://sprites/mapbox/dark-v10',
        center: [113.97923191113188, 22.589860256941634],
        // center: [ -16.06102635228848,  84.93125123478856],
        // center: [-75.789, 41.874],
        zoom: 12,
      }).addControl(
        new MapboxLanguage({
          defaultLanguage: 'zh-Hans',
        })
      );

      this.map = map;
      window.map = map;

      // function metersToPixelsAtMaxZoom(meters, latitude) {
      //   return meters / 0.075 / Math.cos((latitude * Math.PI) / 180);
      // }

      // const typeMap = new Map([
      //   [
      //     'fill',
      //     {
      //       'fill-color': 'yellow',
      //       'fill-outline-color': 'red',
      //     },
      //   ],
      //   [
      //     'circle',
      //     {
      //       'circle-radius': 10,
      //       // 'circle-radius': {
      //       //   stops: [
      //       //     [0, 0],
      //       //     [20, _pixelRadius],
      //       //   ],
      //       //   base: 2,
      //       // },
      //       // Color circle by earthquake magnitude  用颜色标出 PM2.5 的污染程度
      //       'circle-color': 'skyblue',
      //       'circle-stroke-color': 'transparent',
      //       'circle-stroke-width': 0, // 圆点的边框大小
      //     },
      //   ],
      // ]);

      map.on('load', function () {
        // map.addSource('radar', {
        //   type: 'raster',
        //   scheme: 'tms',
        //   tiles: [
        //     'http://localhost:12306/geoserver/gwc/service/tms/1.0.0/cite%3A7wdata@EPSG%3A900913@png/{z}/{x}/{y}.png',
        //   ],
        // });
        // map.addLayer({
        //   id: 'radar-layer',
        //   type: 'raster',
        //   source: 'radar',
        //   'source-layer': 'sensoronehour10',
        //   paint: {
        //     // 'raster-fade-duration': 0,
        //   },
        // });
      });

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });

      map.on('click', 'boundary-layer', function (e) {
        // console.log('click :>> ', e);
        const features = map.queryRenderedFeatures(e.point, {
          layers: ['boundary-layer'],
        });
        console.log('features :>> ', features);
      });
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* 弹出层样式 */
.mapboxgl-popup {
  padding-bottom: 5px;
}
/* 控制关闭按钮 */
.mapboxgl-popup-close-button {
  /* display: none; */
}
.mapboxgl-popup-content {
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
  padding: 0;
  width: 180px;
}
.mapboxgl-popup-content-wrapper {
  padding: 1%;
}
.mapboxgl-popup-content h3 {
  background: #91c949;
  color: #fff;
  margin: 0;
  display: block;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  font-weight: 700;
  /* margin-top: -15px; */
}
.mapboxgl-popup-content h4 {
  margin: 0;
  display: block;
  padding: 10px;
  font-weight: 400;
}
.mapboxgl-popup-content div {
  padding: 10px;
}
.mapboxgl-container .leaflet-marker-icon {
  cursor: pointer;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
  margin-top: 15px;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
  border-bottom-color: #91c949;
}
</style>
